<template>
	<view>

		<swiperTabHead :tabBars="tabBars" :tabIndex="tabIndex" @tabtap="tabtap">
		</swiperTabHead>

		<view class="uni-tab-bar">
			<swiper :style="{height:swiperHeight+'px'}" :current="tabIndex" @change="swiperChange">
				<swiper-item v-for="(items, index) in newlist" :key="index">
					<scroll-view scroll-y class="list topic-new " @scrolltolower="loadmore(index)">
						<template v-if="items.list.length > 0">
							<!-- 话题列表 -->
							<block v-for="(item, index1) in items.list" :key="index1">
								<topic-new-list :item="item" :index="index1"></topic-new-list>
							</block>
							<!-- 上拉加载 -->
							<loadMore :loadtext="items.loadtext"></loadMore>
						</template>
						<template v-else>
							<!-- 无内容 -->
							<noThing></noThing>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>

	</view>
</template>

<script>
	import swiperTabHead from '../../components/common/swiper-tab-head.vue';
	import loadMore from '../../components/common/load-more.vue';
	import noThing from '../../components/common/no-thing.vue';
	import topicNewList from '../../components/news/topic-new-list.vue';


	export default {
		components: {
			swiperTabHead,
			loadMore,
			noThing,
			topicNewList
		},
		data() {
			return {
				swiperHeight: 500,
				tabBars: [{
						name: "关注",
						id: "guanzhu"
					},
					{
						name: "推荐",
						id: "tuijian"
					},
					{
						name: "体育",
						id: "tiyu"
					},
					{
						name: "热点",
						id: "redian"
					},
					{
						name: "财经",
						id: "caijing"
					},
					{
						name: "娱乐",
						id: "yule"
					},
				],
				tabIndex: 0,
				newlist: [{
						loadtext: "上拉加载更多",
						list: [{
								titlepic: "../../static/demo/topicpic/1.jpeg",
								title: "话题名称",
								desc: "我是话题描述",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/demo/topicpic/2.jpeg",
								title: "话题名称",
								desc: "我是话题描述我是话题描是话题描述我",
								totalnum: 50,
								todaynum: 10
							}, {
								titlepic: "../../static/demo/topicpic/3.jpeg",
								title: "话题名称",
								desc: "我是话题描述",
								totalnum: 50,
								todaynum: 10
							}, {
								titlepic: "../../static/demo/topicpic/4.jpeg",
								title: "话题名称",
								desc: "我是话题描述",
								totalnum: 50,
								todaynum: 10
							}, {
								titlepic: "../../static/demo/topicpic/1.jpeg",
								title: "话题名称",
								desc: "我是话题描述",
								totalnum: 50,
								todaynum: 10
							}, {
								titlepic: "../../static/demo/topicpic/2.jpeg",
								title: "话题名称",
								desc: "我是话题描述我是话题描是话题描述我",
								totalnum: 50,
								todaynum: 10
							}, {
								titlepic: "../../static/demo/topicpic/3.jpeg",
								title: "话题名称",
								desc: "我是话题描述",
								totalnum: 50,
								todaynum: 10
							}, {
								titlepic: "../../static/demo/topicpic/4.jpeg",
								title: "话题名称",
								desc: "我是话题描述",
								totalnum: 50,
								todaynum: 10
							}
						]
					},
					{
						loadtext: "上拉加载更多",
						list: []
					},
					{
						loadtext: "上拉加载更多",
						list: []
					},
					{
						loadtext: "上拉加载更多",
						list: []
					}
				]
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100);
					// console.log(height);
					this.swiperHeight = height;
				}
			})
		},
		methods: {
			// 上拉加载
			loadmore(index) {
				if (this.newlist[index].loadtext != "上拉加载更多") {
					return;
				}
				this.newlist[index].loadtext = "加载中";
				setTimeout(() => {
					//获取完成
					let obj = {
						titlepic: "../../static/demo/topicpic/2.jpeg",
						title: "话题名称",
						desc: "我是话题描述我是话题描是话题描述我",
						totalnum: 50,
						todaynum: 10
					};
					this.newlist[index].list.push(obj);
					this.newlist[index].loadtext = "上拉加载更多";
				}, 1000)
			},
			//tabbar点击事件
			tabtap(index) {
				this.tabIndex = index;
			},
			//swiper滑动事件
			swiperChange(e) {
				// console.log(JSON.stringify(e.detail));
				this.tabIndex = e.detail.current;
			}
		}
	}
</script>

<style>
	.topic-new {
		padding: 20upx;
	}
	
	.topic-new>view:first-child{
		padding-bottom: 5upx;
		font-size: 32upx;
	}
</style>
